<template>
	<view style="padding: 10px 10px 0px;border-radius: 5px;">
		
<!-- 		<view class="bottom_line">
			<view @click="addJob" style="margin:5px;padding: 10px;border: solid 1rpx #eee;display:flex;justify-content: center;">
				<u-icon name="plus"></u-icon>
				添加同类型职位
			</view>
		</view> -->
		
		<!-- 岗位项目 -->
		<view  class="bottom_line" v-for="(index) in 1" style="display: flex;justify-content: space-between;align-items:center;line-height: 12px;padding: 5px 0px;">
			<!-- 内容区域 -->
			<!-- 内容区域 -->
			<view style="flex: 1 0 0%;display: flex;flex-direction: column;padding: 2px;">
				<view style="padding: 8px;display: flex;justify-content: space-between;align-items: center;flex-wrap: nowrap;">		
					<!-- 职位名称 -->
					<view style="flex: 1 1 55%;display: flex;justify-content: space-between;">
						<view style="font-size: 13px;font-weight: bold;white-space: nowrap;"
							:style="{
								color:formData.name?'black':'#999',
								fontSize:formData.name?'13px':'15px'
							}"
						>
							<text>{{formData.name?formData.name:'输入岗位名称:例如举牌'}}</text>
							<!-- <u-input size="mini" @change=""></u-input> -->
						</view>
					</view>
					<!-- 时间 -->
					<view style="flex:0 0 45%;text-align: right;color:#757575">
						<view style="line-height: 13px;font-size: 13px;font-weight: bold;white-space: nowrap;"><text>{{fixedTime(formData.start_time)}}-{{fixedTime(formData.end_time)}}</text></view>
					</view>
				</view>
				
				<view style="display: flex;justify-content: space-between;padding:5px 3px;">
					<view>
						<view v-for="(text,index) in lables" style="margin: 5px 2px;padding: 2px 5px;border-radius: 50px;color:white;background-color: #ffa200;font-size: 10px;display: inline-block">
							<text>{{text}}</text>
						</view>
					</view>
					
					<view style="display: flex;justify-content: space-between;align-items:flex-start;padding-top: 5px;">
						<!-- 工资 -->
						<view style="font-weight: bold;color: #f00;font-size: 13px;white-space: nowrap;">
							<span>{{formData.price}}元/{{formData.price_type}}</span>
							<span>/{{formData.settle_type}}</span>
						</view>
						<!-- 人数 -->
						<span style="font-size: 12px;color: #9c9c9c;padding-left: 5px;white-space: nowrap;">1/{{formData.num}}人</span>
					</view>
				</view>
			</view>
			
			<!-- 关闭按钮 -->
			<!-- <view style="margin: 0 0px 0 5px;"><u-icon name="close-circle-fill" size="20"></u-icon></view> -->
		</view>
		
		<u-cell-group :border="false">
			<u-cell title="岗位名称">
				<template #value>
					<view style="margin-left: 10px;">
						<u--input
							placeholder="岗位名称"
							border="surround"
							v-model="formData.name"
							maxlength="6"
						></u--input>
					</view>
				</template>
			</u-cell>
			<!-- 开始时间 -->
			<u-cell title="开始时间"  isLink @click="showActivityStartDateTimeSel = true">
				<template #value>
					<view>
						{{$dayjs('1900-01-01 ' + formData.start_time).format('A HH:mm')}}
					</view>
				</template>
			</u-cell>
			<!-- 结束时间 -->
			<u-cell title="结束时间" isLink @click="showActivityEndDateTimeSel = true">
				<template #value>
					<view>
						{{$dayjs('1900-01-01 ' + formData.end_time).format('A HH:mm')}}
					</view>
				</template>
			</u-cell>
			
			<!-- 结算类型 -->
			<u-cell title="结算类型" :value="formData.settle_type" isLink @click="showSettleType = true"></u-cell>
			
			<u-cell title="工价类型" :value="formData.price_type" isLink @click="showPriceType = true"></u-cell>
			
			<u-cell title="工价" isLink>
				<template #value>
					<view @click="openKeyboard" style="display: flex;justify-content: space-between;align-items: center;">
						<text style="flex:1 1 0;text-align: center;font-weight: bold;">{{formData.price}}</text>
						<text>元/小时</text>
					</view>
				</template>
			</u-cell>
			
			<u-cell title="需求人数">
				<template #value>
					<view>
						<u-number-box v-model="formData.num" @change="valChange"></u-number-box>
					</view>
				</template>
			</u-cell>
			
			<u-cell title="性别要求" 
				isLink 
				@click="showSexType = true"
			>
				<template #value>
					<view>
						{{formData.sex?formData.sex:'关闭'}}
					</view>
				</template>
			</u-cell>
			
			<u-cell title="年龄要求"
				isLink 
				@click="showAgeType = true"
			>
				<template #value>
					<view>
						{{formData.age?formData.age:'关闭'}}
					</view>
				</template>
			</u-cell>
			
			<u-cell title="身高要求" 
				isLink 
				@click="showHeightType = true"
			>
				<template #value>
					<view>
						{{formData.height?formData.height:'关闭'}}
					</view>
				</template>
			</u-cell>
		</u-cell-group>
	</view>
	
	<view  style="position:fixed;bottom:0;border:solid 1rpx #eee;width:100%;display: flex;justify-content: space-between;">
		<view @click="onCancel" style="flex: 0 0 50%;padding:15px">
			<view style="color: red;display: flex;align-items: center;justify-content: center;">
				取消
			</view>
		</view>
		<view @click="onComfirm" style="flex: 0 0 50%;padding:15px;background-color: #ffa200;">
			<view style="color:white;display: flex;align-items: center;justify-content: center;">
				确定
			</view>
		</view>
	</view>
	
	<u-datetime-picker
		title="开始时间"
		:show="showActivityStartDateTimeSel"
		:minDate="$dayjs().add(1,'minute').valueOf()"
		:maxDate="$dayjs().add(1,'year').valueOf()"
		mode="time"
		v-model="formData.start_time"
		:closeOnClickOverlay="true"
		@confirm="showActivityStartDateTimeSel = false" 
		@cancel="showActivityStartDateTimeSel = false"
		@close="showActivityStartDateTimeSel = false"
	></u-datetime-picker>
	
	<!-- 活动结束日期选择 -->
	<u-datetime-picker
		 title="结束时间"
		:show="showActivityEndDateTimeSel"
		:minDate="$dayjs().add(1,'minute').valueOf()"
		:maxDate="$dayjs().add(1,'year').valueOf()"
		v-model="formData.end_time"
		mode="time"
		:closeOnClickOverlay="true"
		@confirm="showActivityEndDateTimeSel = false"
		@cancel="showActivityEndDateTimeSel = false"
		@close="showActivityEndDateTimeSel = false"
	></u-datetime-picker>
	
	<u-picker 
		title="结算方式" 
		:show="showSettleType" 
		:closeOnClickOverlay="true"
		:columns="settleType" 
		@confirm="(e)=>{formData.settle_type = e.value[0];showSettleType=false}"
		@cancel="showSettleType = false"
		@close="showSettleType = false"
	></u-picker>
	
	<u-picker
		title="工价类型" 
		:show="showPriceType" 
		:closeOnClickOverlay="true"
		:columns="priceType" 
		@confirm="(e)=>{formData.price_type = e.value[0];showPriceType=false}"
		@cancel="showPriceType = false"
		@close="showPriceType = false"
	></u-picker>
	
	<u-picker 
		title="性别要求" 
		:show="showSexType" 
		:columns="sexType"
		:closeOnClickOverlay="true"
		@confirm="(e)=>{formData.sex = e.indexs[0]?e.value[0]:null;showSexType=false}"
		@cancel="showSexType = false"
		@close="showSexType = false"
	></u-picker>
	
	<u-picker
		title="身高要求" 
		:show="showHeightType" 
		:columns="heightType"
		:closeOnClickOverlay="true"
		@confirm="(e)=>{formData.height = e.indexs[0]?e.value[0]:null;showHeightType=false}"
		@cancel="showHeightType = false"
		@close="showHeightType = false"
	></u-picker>
	
	<u-picker
		title="年龄要求" 
		:show="showAgeType" 
		:columns="ageType"
		:closeOnClickOverlay="true"
		@confirm="(e)=>{formData.age = e.indexs[0]?e.value[0]:null;showAgeType=false}"
		@cancel="showAgeType = false"
		@close="showAgeType = false"
	></u-picker>
	
	<keyboard-price ref="keyboard" :isClose="false" type="digit" v-model="formData.price"></keyboard-price>
	
</template>

<script>
	import keyboardPrice from '@/components/liujto-keyboard/liujto-keyboard-price.vue'
	import timeTextFormat from '@/utils/mixins/time-text-format.js'
	import workData from '@/utils/data/workData.js'
	export default {
		mixins:[workData,timeTextFormat],
		components:{keyboardPrice},
		data() {
			return {
				lables:[],
				jobs:[],
				showAgeType:false,
				showHeightType:false,
				showSexType:false,
				showPriceType:false,
				showSettleType:false,
				showActivityStartDateTimeSel:false,
				showActivityEndDateTimeSel:false,
				tmpFormData:{
					name:'',
					price_type:'小时',
					price:16,
					settle_type:'日结',
					start_time:this.$dayjs().add(1,'hour').format('HH:mm'),
					end_time:this.$dayjs().add(2,'hour').format('HH:mm'),
					sex:null,
					age:null,
					height:null,
					num:8
				},
				formData:null
			}
		},
		watch: {
			"formData.sex": function(newValue, oldValue) {
				if(newValue) 
					this.lables.push(newValue);
				else
					this.lables.splice(this.lables.findIndex(e=>e==oldValue),1);
			},
			"formData.age": function(newValue, oldValue) {
				if(newValue) 
					this.lables.push(newValue);
				else
					this.lables.splice(this.lables.findIndex(e=>e==oldValue),1);
			},
			"formData.height": function(newValue, oldValue) {
				if(newValue) 
					this.lables.push(newValue);
				else
					this.lables.splice(this.lables.findIndex(e=>e==oldValue),1);
			}
		},
		onLoad(){
			console.log('LLLLLLLLLOODD')
			this.formData = this.tmpFormData
			console.log(this.formData)
		},
		onShow(){ 
			console.log(this.pageParam.job)
			
			if(this.pageParam.job)
			{
				this.formData = this.pageParam.job
			}else {
				this.formData = this.tmpFormData
			}
			
			console.log(this.formData)
		},
		methods: {
			// addJob(){
			// 	this.jobs.push({})
			// },
			openKeyboard(){
				this.$refs.keyboard.open()
			},
			async updateJob(){
				uni.showLoading({
					title:'正在提交'
				})
				
				let res = await this.$http.post('/manager/job/job/update',{
					formData:this.formData
				})
				console.log('AA')
				
				uni.hideLoading()
				
				uni.showToast({
					title:'修改成功',
					complete() {
						uni.navigateBack()
					}
				})
				
				console.log(res)
				
				this.pageParam.job = Object.assign(this.pageParam.job,res.data)
							  
				console.log(this.pageParam.job)
			},
			async createJob(){
				
			},
			onComfirm(){ 
				console.log('WTF')
				console.log(this.task)
				if(this.formData.id)
				{
					this.updateJob()
				}else{
					this.createJob()
				}
			},
			async onCancel(){
				uni.navigateBack();
			},
			async createJob(){
				console.log(this.pageParam.task)
				
				uni.showLoading({
					title:'正在创建'
				})
				 
				let res = await this.$http.post('/manager/job/job/create',{
					formData:{
						task_id:this.pageParam.task.id,
						...this.formData,
					}
				})
				
				uni.hideLoading()
				
				uni.showToast({
					title:'创建成功'
				})
				
				console.log(res)
				console.log(this.pageParam.task)
				let job = res.data
				this.pageParam.task.jobs.push(job)
				console.log(this.pageParam.task)
			
				setTimeout(()=>{
					uni.navigateBack()
				},800)
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: white;
	}
</style>
